<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            height: 400px;
            margin-left: 200px;
            margin-top: 100px;
            position: relative;
        }

        .small {
            width: 400px;
            height: 400px;
            border: 4px solid #ddd;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            position: relative;
        }

        .small img {
            width: 100%;
            height: 100%;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 700px;
            top: 100px;
            display: none;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            width: 1600px;
            height: 1600px;
            left: 0;
            top: 0;
        }

        .grayBox {
            width: 80px;
            height: 80px;
            border: 2px solid #ddd;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
        }

        .wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .choice-btn {
            position: absolute;
            bottom: -120px;
            width: 100%;
        }

        .choice-btn img {
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
        }

        .choice-btn img:hover {
            border-color: #000;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="small">
            <div class="wrap"></div>
            <img src="./images/1.jpeg" alt="">
            <div class="grayBox"></div>
        </div>
        <div class="choice-btn">
            <img src="./images/1.jpeg" alt="">
            <img src="./images/2.jpeg" alt="">
            <img src="./images/3.jpeg" alt="">
        </div>
    </div>

    <div class="big">
        <img src="./images/1.jpeg" alt="">
    </div>


</body>
<script>
    function Magnifie() {
        this.container = document.querySelector(".container")
        this.small = document.querySelector(".small")
        this.small_img = document.querySelector(".small img")
        this.grayBox = document.querySelector(".grayBox")
        this.big = document.querySelector(".big")
        this.big_img = document.querySelector(".big img")
        this.small_size = {
            width: this.small.offsetWidth,
            height: this.small.offsetHeight
        }
        this.grayBox_size = {
            width: parseInt(getComputedStyle(this.grayBox).width),
            height: parseInt(getComputedStyle(this.grayBox).height)
        }
        this.big_size = {
            width: parseInt(getComputedStyle(this.big).width),
            height: parseInt(getComputedStyle(this.big).height)
        }
        
        this.big_img_size = {
            width: parseInt(getComputedStyle(this.big_img).width),
            height: parseInt(getComputedStyle(this.big_img).height)
        }
        this.btn = document.querySelector(".choice-btn")
        this.img_btn = document.querySelectorAll(".choice-btn img")
        this.bindEvent()
    }
    Magnifie.prototype.bindEvent = function () {
        var self = this;
        // 鼠标移入显示grayBox和big
        this.small.onmouseover = function () {
            self.grayBox.style.display = "block";
            self.big.style.display = "block";
        }
        // 鼠标离开隐藏grayBox和big
        this.small.onmouseout = function () {
            self.grayBox.style.display = "none";
            self.big.style.display = "none";
        }
        this.small.onmousemove = function (e) {
            // 获取坐标信息
            var e = e || window.event;
            // 让鼠标位于grayBox中间,且定义变量存起来,以便后面赋值给grayBox的left和top
            var x = e.offsetX - 40;
            var y = e.offsetY - 40;
            // 限定grayBox的边界
            if (x < 0) { x = 0 }
            if (y < 0) { y = 0 }
            var max_left = self.small_size.width - self.grayBox_size.width;
            if (x > max_left) {
                x = max_left - 10;
            }
            var max_top = self.small_size.height - self.grayBox_size.height;
            if (y > max_top) {
                y = max_top - 10;
            }
            // 设置grayBox移动的距离(将坐标信息赋值给grayBox,让grayBox跟随鼠标移动)
            self.grayBox.style.left = x + "px";
            self.grayBox.style.top = y + "px";

            // 计算百分比
            var pro_left = (x / max_left).toFixed(2);
            var pro_top = (y / max_top).toFixed(2);

            // 计算图片在big里面显示出来的最大距离
            var max_big_left = self.big_img_size.width - self.big.offsetWidth;
            var max_big_top = self.big_img_size.height - self.big.offsetHeight;

            // 计算图片往左移动的距离
            self.big_img.style.left = - pro_left * max_big_left + "px";
            self.big_img.style.top = - pro_top * max_big_top + "px";
        }
        // 遍历小图片按钮
        for(var i = 0;i<self.img_btn.length;i++){
            // 鼠标滑入小图片按钮
            self.img_btn[i].onmouseover = function(){
                // 将原本small里面的图片地址换成小图片按钮的图片地址（绑定事件的函数this指向Dom元素）
                self.small_img.src = this.src;
                // 同时也将big里面的图片地址换成小图片按钮的图片地址
                self.big_img.src = this.src
            }
        }
    }
    var res = new Magnifie()
</script>

</html>